<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        :column="column"
        :getList="getPreparationDataReportForms"
        uniqueId="mesTeamTable"
      >
      </ele-page>
    </div>
    <el-dialog title="图片"
               :visible.sync="dialogVisible"
               width="80%"
               :append-to-body="true"
               v-loading="isLoading"
               :close-on-click-modal="false">
      <div
        class="item"
        v-for="(item, key) in imgUrlList"
        :key="key"
      >
        <el-image
          style="width: 100px; height: 100px"
          :src="item"
          :preview-src-list="imgUrlList">
        </el-image>
        <!--        <el-image-->
        <!--          :src="item"-->
        <!--        ></el-image>-->
      </div>
    </el-dialog>
    <!-- 此组件放到与抽屉平级，理论上不需要修改 -->
  </div>
</template>

<script>
import {
  searchConfig,
  operateList,
} from './config'
const { adminUrl } = url();

import {
  getPreparationDataReportForms,
  getRecheckDataReportForms,
} from "@/api/reportForms/reportForms";
import url from "@/axios/url";
import {rowCenConfig} from "@/views/outbound/wmsOutTask/config";
import {agreeOut, getList} from "@/api/outbound/wmsOutTask";

export default {
  name: 'preparationData',
  mixins: [ searchConfig],
  data() {
    const self = this
    return {
      fileList: [],
      fileListOrg: [],
      isHaveCj:true,
      adminUrl: adminUrl,
      operateList,
      visible: false,
      isLoading: false,
      loading: false,
      imgUrlList:[],
      mainImgUrl:'',
      subImgUrl:'',
      dataId:'',
      subType:0,
      detailData: {},
      subId: '',
      dialogVisible: false,
      subPicViewdialogVisible: false,
      mainPicUpdateDialogVisible: false,
      subPicUpdateDialogVisible: false,
      getPreparationDataReportForms,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: "modelName",
          label: '车型',
          showOverflowTooltip: true,
        },
        {
          prop: 'vinCode',
          label: 'VIN编码',
          showOverflowTooltip: true
        },
        {
          prop: 'uwbCode',
          label: 'UWB编码',
          showOverflowTooltip: true
        },
        {
          prop: 'preparationOrderCode',
          label: '工单编号',
          showOverflowTooltip: true,
        },
        {
          prop: 'orderName',
          label: '工单名称',
          showOverflowTooltip: true,
        },
        {
          prop: 'engineerAdd',
          label: '工单来源',
          showOverflowTooltip: true,
        },
        {
          prop: 'orderState',
          label: '工单状态',
          showOverflowTooltip: true
        },
        {
          prop: 'startByName',
          label: '开工人',
          showOverflowTooltip: true
        },
        {
          prop: 'startTime',
          label: '工程师开始时间',
          showOverflowTooltip: true
        },
        {
          prop: 'endTime',
          label: '工程师报工时间',
          showOverflowTooltip: true
        },
        {
          prop: 'approvalName',
          label: '主管审批人',
          showOverflowTooltip: true
        },
        {
          prop: 'approvalEndTime',
          label: '主管审批时间',
          showOverflowTooltip: true
        },
        {
          prop: 'finalOrderState',
          label: '终检审批状态',
        },
        {
          prop: 'finalApprovalName',
          label: '终检审批人姓名',
        },
        {
          prop: 'finalApprovalTime',
          label: '终检审批时间',
        },
        {
          prop: 'materialName',
          label: '物料名称',
        },
        {
          prop: 'photoUrl',
          label: '整备前照片',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowCenConfig} onRowOperate={this.rowOperate}></ele-row-operation>
          }
        },
        {
          prop: 'photoUrlNew',
          label: '整备后照片',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowCenConfig} onRowOperate={this.rowNewOperate}></ele-row-operation>
          }
        },
      ],
      form:{}
    }
  },
  computed: {},
  methods: {
    rowNewOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        showPhoto: () => {
          this.viewPic(row.photoUrlNew)
        },
      }
      fnc[handleName] && fnc[handleName]()
    },
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        showPhoto: () => {
          this.viewPic(row.photoUrl)
        },
      }
      fnc[handleName] && fnc[handleName]()
    },
    viewPic(url) {
      if(url)
      {
        this.imgUrlList = url.split(",");
        this.dialogVisible = true;
      }
      else
      {
        this.$message.warning("所选数据没有保存图片")
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.el-row {
  margin-top: 20px;
}
.el-row.last-child {
  margin-bottom: 0;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  display: flex;
  justify-content: center;
  min-height: 25px;
}

//:deep(.ele-form-search){
//  height: 100px !important;
//}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  min-width: 178px;
  min-height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  min-width: 178px;
  min-height: 178px;
  display: block;
}
input:disabled{
  opacity: 1;
  -webkit-text-fill-color: black;
}
</style>
